<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="../config/config.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page
	import="java.util.*,com.cinema.Bean.*,com.cinema.dao.*,com.cinema.dao.imp.*"%>
<%@ page import="java.io.*,java.util.*"%>
<%@ page import="javax.servlet.*,java.text.*"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户详情</title>
<link rel="stylesheet" href="<%=basePath%>css/bootstrap.min.css" />
<link rel="stylesheet" href="<%=basePath%>css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="<%=basePath%>css/index.css" />
<script type="text/javascript" src="<%=basePath%>js/jquery-3.2.1.min.js"></script>
<script src="<%=basePath%>js/bootstrap.min.js"></script>
<style>
body {
	background: #fafafa;
}

.content {
	min-width: 960px;
	height: 520px;
	border: 1px solid #d3d3d3;
	margin: 90px auto 0 auto;
	border-radius: 5px;
}

.content_box {
	margin: 0 auto;
	width: 600px;
	height: 500px;
}

.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td,
	.table>tbody>tr>td, .table>tfoot>tr>td {
	border-top: 0;
}

#myTab {
	margin-top: 50px;
}

.tab-pane {
	height: 350px;
	margin-top: 10px;
}
</style>
</head>
<body>
	<!--头部导航-->
	<nav class="navbar navbar-default navbar-fixed-top nav-min-height">
		<div class="container">
			<div class="navbar-header nav-min-height">
				<a href="#" class="navbar-brand logo"><img
					src="<%=basePath%>/images/logo.png" alt=""></a>
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target="#navbar-collapse">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
			</div>
			<div class="collapse navbar-collapse  nav-min-height"
				id="navbar-collapse">
				<ul class="nav navbar-nav navbar-right  nav-min-height">
					<li><a href="<%=basePath%>/indexServlet"><span
							class="glyphicon glyphicon-home"></span> 首页</a></li>
					<li><a href="#"><span class="glyphicon glyphicon-user"></span>
							${sessionScope.loginUser.userName} </a></li>
				</ul>
			</div>
		</div>
	</nav>

	<div class="container content">
		<div class="content_box">
			<ul id="myTab" class="nav nav-tabs">
				<li class="active" style="min-height: 42px !important;"><a
					href="#user" data-toggle="tab"
					style="color: rgb(255, 15, 75); font-size: 15px; font-weight: bold;">
						我的资料 </a></li>
				<li style="min-height: 42px !important;"><a href="#myTicket"
					data-toggle="tab"
					style="color: rgb(255, 15, 75); font-size: 15px; font-weight: bold;">我的电影票
				</a></li>
				<li style="min-height: 42px !important;"><a href="#recharge"
					data-toggle="tab"
					style="color: rgb(255, 15, 75); font-size: 15px; font-weight: bold;">充值&修改密码</a>
				</li>
			</ul>
			<div id="myTabContent" class="tab-content">
				<div class="tab-pane fade in active" id="user">
					<div class="row">
						<div class="col-md-10" style="margin-left: 2%;">
							<table class="table" style="font-size: 15px;">
								<tr>
									<td style="width: 4%;">账号：</td>
									<td style="width: 17%;">${sessionScope.loginUser.userId}</td>
									<td style="width: 4%;">姓名：</td>
									<td style="width: 17%;">${sessionScope.loginUser.userName}</td>
								</tr>
								<tr>
									<td>性别：</td>
									<td>${sessionScope.loginUser.sex}</td>
									<td>邮箱：</td>
									<td>${sessionScope.loginUser.email}</td>
								</tr>
								<tr>
									<td>电话：</td>
									<td>${sessionScope.loginUser.mobile}</td>
									<td>余额：</td>
									<td><span id="userBalance"></span></td>
								</tr>

							</table>
						</div>
					</div>
				</div>
				<div class="tab-pane fade" id="myTicket">
					<div class="row" style="height: 350px;overflow-y: scroll;">
						<div class="col-md-10 col-md-push-1">

							<ul class="myTickets">
							<c:set var="nowDate" value="<%=System.currentTimeMillis()%>"></c:set> 
							<c:forEach items="${allTickets}" var="tickt">
								<li>
									<p class="h5">片名：${tickt.movieName }</p>
									<p>影厅：${tickt.hallName }</p>
									<p>时间：${tickt.time }</p>
									<p>
									座位号：${tickt.seatRow }排${tickt.seatCol }座
									</p>
									<p><c:if test="${nowDate-(tickt.time.time+tickt.duration*60*1000)>0 }">
									   是否观看：已观看
									</c:if>
									<c:if test="${nowDate>tickt.time.time &&nowDate<(tickt.time.time+tickt.duration*60*1000) }">
									   是否观看：正在放映
									</c:if>
									<%-- <c:if test="${nowDate-(tickt.time.time+tickt.duration*60*1000)<0 }">
									   是否观看：未观看
									</c:if> --%>
									
									</p>
								</li>
								</c:forEach>
							</ul>

						</div>
					</div>
				</div>
				<div class="tab-pane fade" id="recharge">
					<div class="row">
						<div class="col-md-10" style="margin-left: 2%;">
							<div style="width: 58%; float: left;">
								<table class="table">
									<tr>
										<td>在线充值</td>
									</tr>
									<tr>
										<td>
											<div class="input-group-btn" style="float: left;width: 34px;;">
												<button class="btn btn-default btn-sm" type="button"
													id="minusBtn">
													<span class="glyphicon glyphicon-minus"></span>
												</button>
											</div> 
											<input type="text" class="form-control input-sm"
											style="width:98px; float: left;" id="balance" value="0">
											<div class="input-group-btn" style="float: left;">
												<button class="btn btn-default btn-sm" type="button"
													id="plusBtn">
													<span class="glyphicon glyphicon-plus"></span>
												</button>
											</div>
										</td>
									</tr>
									<tr>
										<td><a class="btn btn-danger btn-sm"
											style="display: inline-block; width: 60%;" id="charge">
												确认 </a></td>
									</tr>
								</table>
							</div>
							<div style="width: 42%; float: left;">
								<table class="table">
									<tr>
										<td>修改密码</td>
									</tr>
									<tr>
										<td>原密码： <input type="password"
											class="form-control input-sm" style="width: 146px"
											id="oldPwd">
										</td>
									</tr>
									<tr>
										<td>新密码：<input type="password"
											class="form-control input-sm" style="width: 146px"
											id="newPwd">
										</td>
									</tr>
									<tr>
										<td><a class="btn btn-danger btn-sm"
											style="display: inline-block; width: 76%;" id="savePwd">
												确认 </a></td>
									</tr>
								</table>
							</div>
							<div style="clear: both;"></div>

						</div>
					</div>
				</div>
			</div>
			<div style="margin-top: 15px;">
				<a href="<%=basePath%>/indexServlet"
					class="btn btn-success pull-right">返回首页</a>
			</div>
		</div>
	</div>
</body>
<script>
/**
 * 加载时获取余额
 */
$(function(){
	var id="${sessionScope.loginUser.userId}";
	 var url = "<%=basePath%>userServlet";
	 var args={"userId":id,"method":"getBalanInfo","time":new Date()};
	 
    $.post(url,args,function(data){
   	 $("#userBalance").text(data.balance);
   	 $("#balance").val(0);
	},"json")
});

/**
 * 余额充值模态框，点击确认充值
 */
$("#charge").click(function(){
	// 从数据库中获取余额
	var money = getBalance(); 
	 
    var id="${sessionScope.loginUser.userId}";
    var url = "<%=basePath%>userServlet";
    
    var balance = ($("#balance").val())*1 + money;
    
    var args={"userId":id,"method":"updateBalance","balance":balance,"time":new Date()};
    $.post(url,args,function(data){
    	
      if("success"==data){
        alert('充值成功！');
        $("#balance").val(0);
      }else if("error"==data){
        alert('充值失败，请联系管理员！'); 
      }
		
    });
    return false;//取消默认行为
});

/**
 * 当充值成功之后，更新用户余额
 */
$('a[data-toggle="tab"]').first().on('show.bs.tab', function (e) {
	  var money = getBalance(); 
	  $("#userBalance").text(money);
});

//用户余额充值
$("#minusBtn").click(function() {  // 减号
	var balance = ($("#balance").val())*1;
	if(balance > 5) {
		$("#balance").val(balance-5);
	}
});
$("#plusBtn").click(function() { // 加号
	var balance = ($("#balance").val())*1;
	$("#balance").val(balance+5);
});

/**
 * 从数据库中获取用户余额
 * @return 余额money
 */
function getBalance() {
	var money = null;
	//2.查询余额
	var id="${sessionScope.loginUser.userId}";
	var url = "<%=basePath%>userServlet";
	var args={"userId":id,"method":"getBalanInfo","time":new Date()};
    
    $.ajax({
    	type: "post",
        url: url,
        data: args,
        async : false,
        dataType: "json",
        success: function (data){
        	money = data.balance;
        }
    });
    return money;
}

/**
 * 确认修改密码
 */
 $("#savePwd").click(function(){
	 var id="${sessionScope.loginUser.userId}";
	 var url = '<%=basePath%>'+"userServlet";
		var params = {};
		params.userId = id;
		params.oldPwd = $("#oldPwd").val();
		params.newPwd = $("#newPwd").val();
		params.method = "modifyPwd";
		$.ajax({
			url : url,
			data : params,
			async : false,
			success : function(data) {
				if ("success" == data) {
					alert('修改成功！');
					$("#oldPwd").val("");
					$("#newPwd").val("");
				} else if ("error" == data) {
					alert('修改失败，请联系管理员！');
					$("#oldPwd").val("");
					$("#newPwd").val("");
				}
			}
		});

	})
</script>
</html>